<template>
  <pb-popup v-model="props.isVisible" :title="'首次登录请修改密码'" @confirmFn="setUserData" :Width="400" :closeIcon="false">
    <div>
      <el-form :model="Passwordfrom" label-width="auto" inline ref="ruleFormRef" :rules="Passwordrules">
        <el-form-item label="新密码：" prop="newpassWord">
          <pb-input class="borders" type="password" v-model.trim="Passwordfrom.newpassWord" placeholder="请输入新密码"
            width="442"></pb-input>
        </el-form-item>
        <el-form-item label="确认新密码：" prop="VerifypassWord">
          <pb-input type="password" v-model.trim="Passwordfrom.VerifypassWord" placeholder="请输入确认新密码" width="442"
            class="borders"></pb-input>
        </el-form-item>
      </el-form>
    </div>
  </pb-popup>
</template>
<script setup lang="ts">
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['pushHome'])
const Passwordfrom = reactive({
  newpassWord: '',
  VerifypassWord: ''
})
const validatornewpassWord = (rule: any, value: any, callback: any) => {
  const regex = /^[A-Za-z0-9]{8,24}$/;
  if (!regex.test(value)) {
    callback(new Error('新密码长度为8到24个字符'));
  } else {
    callback();
  }
}
const validatorVerifypassWord = (rule: any, value: any, callback: any) => {
  const regex = /^[A-Za-z0-9]{8,24}$/;
  if (!regex.test(value)) {
    callback(new Error('确认密码长度为8到24个字符'));
  } else {
    callback();
  }
}
const Passwordrules = reactive({
  newpassWord: [
    { required: true, validator: validatornewpassWord, trigger: 'blur' },
  ],
  VerifypassWord: [
    { required: true, validator: validatorVerifypassWord, trigger: 'blur' }
  ],
})
const offvisiblefn = () => {
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields(); // 重置表单并清除校验规则
  }
  isVisible.value = false
}
const setUserData = async () => {
  if (ruleFormRef.value) {
    await ruleFormRef.value.validate((valid) => {
      if (valid) {
        emit('pushHome', Passwordfrom.newpassWord)
      } else {
        // 处理验证错误
      }
    });
  }
}
</script>
<style lang="scss" scoped>
.borders {
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .1);
}
</style>
